<template>
  <div class="container">
    <div class="outbox">
      <div class="header">
        <el-button
          type="warning"
          plain
          size="large"
          style="margin-right: 20px"
          @click="gowrite"
          >+发表我的游记</el-button
        >
        <el-input
          v-model="input"
          style="width: 400px"
          size="large"
          placeholder="请输入您想去的地方，比如香港"
          :prefix-icon="Search"
          class="input"
        />
        <el-button
          plain
          size="large"
          style="margin-left: 10px"
          @click="gosearch"
          >搜索</el-button
        >
        <el-button plain size="large" style="margin-left: 10px" @click="reset"
          >重置</el-button
        >
      </div>
      <div class="mainlist" :class="{ active: !data.length }">
        <div class="title">旅游攻略列表</div>
        <div class="abox" v-if="data.length">
          <div class="main">
            <div class="box" v-for="(item, index) in data" :key="index">
              <div class="left">
                <el-link
                  class="one"
                  href=""
                  target="_blank"
                  @click="goclick(item)"
                  >{{ item.title }}</el-link
                >
                <div
                  class="author"
                  style="display: flex; align-items: center; margin-top: 5px"
                >
                  <el-icon color="#FFBC42" size="20px"><Star /></el-icon>
                  <div>来自{{ item.author }}的攻略</div>
                </div>
                <div class="two">{{ item.description }}</div>
                <el-tag
                  type="warning"
                  v-for="(tags) in item.tag"
                  style="margin-right: 5px"
                  >{{ tags }}</el-tag
                >
                <el-tag type="success" style="margin-left: 10px"
                  >更新时间为：{{ item.date }}</el-tag
                >
              </div>
              <div class="right">
                <img :src="item.img" />
              </div>
            </div>
          </div>
          <el-pagination
            :page-size="2"
            background
            layout="prev, pager, next,total"
            :total="searchlist.length"
            style="margin-left: 30%; padding-bottom: 50px"
            @current-change="handleCurrentChange"
            v-model:current-page="currentPage1"
          />
        </div>
        <div v-else>
          <el-empty :image-size="200" description="暂无此地点攻略！" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import Map from '@/components/map/index.vue'
import { getstrategydata } from '@/api/strategy/index'
import type{strategyRespnseData,strategyObject} from '@/api/strategy/type'
import { ref, onMounted} from 'vue'
import { usestrategyStore } from '@/stores/strategy'
import { Search } from '@element-plus/icons-vue'





let input = ref()

const currentPage1 = ref(1)
const strategyStore = usestrategyStore()


const data = ref<strategyObject[]>([])

const searchlist = ref<strategyObject[]>([])

const initdata = async () => {
  let result:strategyRespnseData = await getstrategydata()
  for (let i = 0; i < result.data.length; i++) {
    result.data[i].like = JSON.parse(result.data[i].like as string)
    result.data[i].tag = JSON.parse(result.data[i].tag)
    result.data[i].collect = JSON.parse(result.data[i].collect as string)

    let description = result.data[i].content
    description = description
      .replace(/(\n)/g, '')
      .replace(/(\t)/g, '')
      .replace(/(\r)/g, '')
      .replace(/<\/?[^>]*>/g, '')
      .replace(/\s*/g, '')
    result.data[i].description = description
  }
  searchlist.value = result.data
  data.value = result.data.slice(
    (currentPage1.value - 1) * 2,
    (currentPage1.value - 1) * 2 + 2
  )
  strategyStore.modifystrategydatadata(result.data)
}

import { useRouter } from 'vue-router'
let $router = useRouter()
const gowrite = () => {
  let routerData = $router.resolve({
    path: '/wstrategy'
  })
  window.open(routerData.href, '_blank')
}

const gosearch = () => {
  searchlist.value = []
  for (let i = 0; i < strategyStore.strategydata.length; i++) {
    if (strategyStore.strategydata[i].title.includes(input.value)) {
      searchlist.value.push(strategyStore.strategydata[i])
    }
  }
  currentPage1.value=1
  data.value = searchlist.value.slice(
    (currentPage1.value - 1) * 2,
    (currentPage1.value - 1) * 2 + 2
  )
}



const reset = () => {
  input.value = ''
  searchlist.value = strategyStore.strategydata
  data.value = searchlist.value.slice(
    (currentPage1.value - 1) * 2,
    (currentPage1.value - 1) * 2 + 2
  )
}
const handleCurrentChange = () => {
  data.value = searchlist.value.slice(
    (currentPage1.value - 1) * 2,
    (currentPage1.value - 1) * 2 + 2
  )
}

const goclick = (item: strategyObject) => {
  const encodedObject = encodeURIComponent(JSON.stringify(item))

  // $router.push({
  //   path: '/astrategy',
  //   query: {
  //     item: encodedObject
  //   }
  // })

  let routerData = $router.resolve({
    path: '/astrategy',
    query: {
      item: encodedObject
    }
  })
  window.open(routerData.href, '_blank')
}

// const goback = () => {
//   isshow.value = true
//   nowitem.value = {}
// }
// 在组件挂载后发起请求
onMounted(() => {
  initdata()
})
</script>

<style scoped lang="less">
.container {
  width: 100%;
  margin-top: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .header {
    display: flex;
    justify-content: center;
  }
  .mainlist {
    background-color: white;
    margin-top: 30px;
    width: 850px;
    /* border-radius: 20px; */
    margin-bottom: 20px;
    .title {
      color: #fcbe32;
      font-size: 20px;
      font-weight: 800;
      border-bottom: 1px solid #000;
      padding: 20px;
    }
    .main {
      margin-top: 30px;
    }
    .box {
      display: flex;
      width: 100%;
      /* height: 100px; */
      border-radius: 15px;
      margin-bottom: 50px;
      margin-left: 40px;
      .left {
        width: 70%;
        height: 100%;
        .one {
          font-size: 25px;
        }
        .two {
          margin: 20px 10px;
          color: #666;
          font-size: 14px;
          width: 100%;
          height: 60px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 3; /* 指定显示的行数 */
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          line-height: 1.5;
        }
      }
      .right {
        margin-left: 20px;
        margin-right: 20px;
        img {
          width: 180px;
          height: 180px;
        }
      }
    }
  }
  .detail {
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
    .onebox {
      background-color: white;
      width: 1000px;
      /* width: 1000px;
        height: 100vh; */
      .bigtitle {
        /* margin-top: 50px; */
        font-size: 30px;
        font-weight: 800;
        text-align: center;
      }
      .somedetail {
        margin-top: 10px;
        color: #c9d6de;
        margin-left: 70%;
      }
      .mainbox {
        font-size: 20px;
        margin: 10px 20px;
        line-height: 1.5;
      }
      .strategy {
        margin: 10px 20px;
        width: 50%;
      }
      .map {
        width: 50%;
        height: 300px;
      }
    }
  }
}
.like {
  color: #c5c6b6;
  font-size: 13px;
  margin-left: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px;
}
</style>
